<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="12" :sm="24">
              <a-form-item label="商品分类">
                <a-select style="width: 200px;" v-model="queryParam.goodtypeid" placeholder="请选择"
                  :default-active-first-option="false" :show-arrow="false" :filter-option="false">
                  <a-select-option v-for="(item, index) in goodstypeList" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-button type="primary" @click="searchInfo">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
              <a-button style="margin-left: 8px" type="primary" icon="plus" @click="addBanner"> 添加商品</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table @change="tablePaginationChange" :pagination="pagination" bordered :dataSource="dataSource"
        :columns="columns" :rowKey="(record,index)=> index">
        <div slot="images" slot-scope="text, record" class="img-list">
          <img v-for="(item,index) in record.images.split(',')" :key='index' class="banner-img" :src="item"
            slot="images" />
        </div>
        <div slot="action" slot-scope="text, record" href="javascript:;">
          <a @click="updateItem(record)">修改</a>
          <a style="color: #fc2a26;margin-left: 20px; " @click="deletItem(record.id)">删除</a>
        </div>
      </a-table>
    </a-card>
    <addBox ref="addBox" :visible="addFlag" @cancel="addCancel" @ok="AddSuccess">
    </addBox>
  </page-header-wrapper>
</template>

<script>
  import {
    STable,
    Ellipsis,
  } from '@/components'
  import {
    goodsList,
    goodsDelet,
    typeList
  } from '@/api/goods'
  import addBox from './add'

  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    createVNode
  } from 'vue';
  import {
    Modal
  } from 'ant-design-vue';


  export default {
    components: {
      STable,
      Ellipsis,
      addBox,
    },
    data() {
      return {
        addFlag: false,
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        queryParam: {
          goodtypeid: ''
        },
        dataSource: [],
        columns: [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 100,
          },
          {
            title: '图片',
            key: 'images',
            dataIndex: 'images',
            width: 220,
            scopedSlots: {
              customRender: 'images'
            }
          },{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
          }, {
            title: '规格',
            dataIndex: 'guige',
            key: 'guige',
          },
          {
            title: '单位',
            dataIndex: 'danwei',
            key: 'danwei',
          },
          {
            title: '厂家',
            dataIndex: 'changjia',
            key: 'changjia',
          },
          {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
          },
          {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 140,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        goodstypeList: [],
        searchflag: false
      }
    },
    created() {
      this.getList()
      this.getTypeList()
    },
    methods: {
      resetSearch() {
        this.searchflag = false
        this.queryParam = {
          goodtypeid: '',
        }
        this.getList()
      },
      searchInfo() {
        this.searchflag = true
        this.getList()
      },
      getTypeList() {
        typeList().then(res => {
          this.goodstypeList = res.data
        })
      },
      updateItem(val) {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.setUpdate(val)
        })
      },
      deletItem(id) {
        Modal.confirm({
          title: '提示',
          content: '是否确认删除',
          onOk: () => {
            goodsDelet({
              id: id
            }).then(res => {
              this.getList()
            })
          }
        })
      },
      addCancel() {
        this.addFlag = false
      },
      AddSuccess() {
        this.addFlag = false
        this.getList()
      },
      addBanner() {
        this.addFlag = true
        this.$nextTick(() => {
          this.$refs.addBox.updateflag = false
        })
      },
      tablePaginationChange(e) {
        this.pagination = e
        this.getList()
      },
      getList() {
        goodsList({
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          goodtypeid: this.searchflag ? this.queryParam.goodtypeid : '',
        }).then(res => {
          // res.data.data.forEach(resp => {
          //   resp.create_time = this.getDate(resp.create_time)
          // })
          this.pagination.total = res.data.totalCount
          this.dataSource = res.data.data
        })
      },
      getDate(stamp) {
        var date = new Date(stamp * 1000)
        return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() +
          1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      }
    }
  }
</script>
<style scoped>
  .banner-img {
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }

  .img-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
</style>